<template>
  <div id="app">
    <div class="toasts" v-if="isShow && type === 'top'">
      <div v-for="(item, index) in toasts" :key="'toast_' + index">
        <span class="toasts_item">{{ item.message }}</span>
      </div>
    </div>
    <router-view />
    <div class="toasts_bottom" v-if="isShow && type === 'bottom'">
      <div v-for="(item, index) in toasts" :key="'toast_' + index">
        <span class="toasts_item">{{ item.message }}</span>
      </div>
    </div>
    <!--  <div ref="qrCodeUrl" class="qrcode"></div> -->
    <div class="openscreen" v-if="$store.state.isOpenScreenShow">
      <div class="openscreen_main">
        <i class="icon-international loading"></i
        ><span class="tip">{{ $t("lang.加载中") }}...</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    // this.creatQrCode();
  },
  data() {
    return {
      isShow: true,
      type: "bottom",
      toasts: [
        /* {
          message: "下载 app",
        }, */
      ],
    };
  },
  created() {
    let lang = localStorage.getItem("siteLang") || this.$store.state.lang;
    this.$i18n.local = lang;
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="less">
@base: 23.44rem;
#app {
  padding: 0;
  margin: 0;
  font-size: 14 / @base;
  .openscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    .openscreen_main {
      display: flex;
      width: 180 / @base;
      color: #ccc;
      margin: 0 0 0 50 / @base;
      text-shadow: #efefef 1 / @base 5 / @base 5 / @base;
      i {
        &.loading {
          width: 30%;
          font-size: 40 / @base;
        }
      }
      span {
        &.tip {
          width: 70%;
          line-height: 40 / @base;
          text-align: left;
          margin: 0 0 0 10 / @base;
        }
      }
    }
  }
  .toasts {
    position: fixed;
    top: 50 / @base;
    left: 0 / @base;
    right: 0 / @base;
    z-index: 99998;
    .toasts_item {
      background-color: rgba(0, 0, 0, 0.6);
      text-align: center;
      color: #fff;
      font-size: 14 / @base;
      line-height: 32 / @base;
      border-radius: 5 / @base;
      padding: 6 / @base 20 / @base;
      width: auto;
    }
  }
  .toasts_bottom {
    position: fixed;
    bottom: 66 / @base;
    left: 0 / @base;
    right: 0 / @base;
    z-index: 99998;
    .toasts_item {
      background-color: rgba(0, 0, 0, 0.6);
      text-align: center;
      color: #fff;
      font-size: 14 / @base;
      line-height: 32 / @base;
      border-radius: 32 / @base;
      padding: 6 / @base 20 / @base;
      width: auto;
    }
  }
  .qrcode {
    width: 100 / @base;
    padding: 0 0 100 / @base 0;
    margin: 0 auto;
    canvas {
      margin: 0 auto;
      text-align: center;
    }
    img {
      margin: 0 auto;
      text-align: center;
    }
  }
}
</style>
